一个灵活系统的基础在于定义一个严格的内部 契约 或接口，要求对象必须遵循。在此情境中，我们定义了一个 表格接口 ，其中每个单元格对象都保证存在三个特定方法： minWidth()， minHeight()和 draw(width, height)。
1. 接口契约
通过统一使用这些方法，布局逻辑可以在不了解单个单元格内部数据类型的情况下，计算出全局行列尺寸。这是一个典型的 基于接口的多态性。
2. TextCell 实现
该 TextCell 构造函数通过将字符串拆分为逐行数组来处理原始输入。这将复杂性从渲染阶段转移到了实例化阶段。
this.text = text.split("\n");
3. 确定性绘制
该 draw(width, height) 方法确保每个单元格输出都能通过 repeat() 辅助函数进行完美填充。这能确保无论内容长度如何，都能保持垂直和水平对齐。
$$\text{填充} = \text{宽度} - \text{行长度}$$
main.py
TERMINALbash — 80x24
> Ready. Click "Run" to execute.
>
QUESTION 1
What is the primary benefit of the Table Interface contract in this design?
It forces all data to be strings.
It allows the layout engine to remain agnostic of the data it displays.
It speeds up JavaScript memory allocation.
It automatically creates HTML tables.
✅ Correct!
By relying on an interface rather than specific types, the engine can layout any object that implements the required methods.❌ Incorrect
The engine doesn't care about the data type, only that the object 'looks like' a cell by providing the contract methods.QUESTION 2
In
TextCell.prototype.minWidth, why is reduce used?To sum the length of all lines.
To find the longest line length in the cell.
To remove empty lines.
To convert the array back into a string.
✅ Correct!
It uses Math.max within reduce to distill the array of lines down to a single maximum width value.❌ Incorrect
The width of the cell is determined by its widest single line, not the sum of all lines.QUESTION 3
What does
TextCell.prototype.draw(width, height) return?A single long string with newline characters.
A canvas object for rendering.
An array of strings, each exactly 'width' characters wide.
A boolean indicating if the draw was successful.
✅ Correct!
It returns an array of length 'height', where each string is padded to the specified width.❌ Incorrect
Returning an array of strings allows the layout engine to combine multiple cells row-by-row easily.QUESTION 4
What is the purpose of the
repeat helper function?To handle cell borders.
To add padding spaces to ensure straight columns.
To duplicate rows for larger tables.
To loop through the cell array.
✅ Correct!
It generates the necessary number of spaces to ensure every line in a column has the same length.❌ Incorrect
repeat is a utility for string padding, which is critical for visual alignment in text tables.QUESTION 5
How does
TextCell handle a multi-line string input?It rejects it as invalid data.
It stores it as an array using
split('\n').It replaces newlines with spaces.
It only keeps the first line.
✅ Correct!
Splitting the text into an array allows the cell to manage its height and width based on individual lines.❌ Incorrect
The constructor breaks the input down so minHeight and minWidth can perform calculations on the lines.Case Study: The Modular Billboard System
Applying Interface Contracts to Physical Layouts
Imagine a physical modular billboard system where every advertisement panel must fit into a standardized metal frame. Whether a panel contains a single word or a full paragraph, the installer only needs to know the panel's dimensions (minWidth/minHeight) and how to 'draw' (bolt) it in.
Q
Explain how the 'installer' in this scenario represents the table layout function in our code.
Solution:
The installer is the layout engine. They don't need to know the 'content' (the ad) of the panel, only that it obeys the dimensions and can be drawn. This decoupling allows the billboard to host any panel type interchangeably.
The installer is the layout engine. They don't need to know the 'content' (the ad) of the panel, only that it obeys the dimensions and can be drawn. This decoupling allows the billboard to host any panel type interchangeably.
Q
If we wanted to create a 'RedTextCell' that prints red text but otherwise behaves the same, which part of the interface contract would change?
Solution:
Only the implementation of the
Only the implementation of the
draw method would change to include color codes. minWidth and minHeight would remain the same, proving the interface protects the layout logic from visual implementation details.